<template>
  <!--        右侧-->
  <el-form style="flex:11;background-color:#242E66">
    <!--            form-->
    <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline; label-color:#EDEDED">
      <el-form-item label="所属单位" prop="unit">
        <el-cascader v-model="formInline.region" placeholder="请选择 所属单位"
                     :options="options" filterable clearable :props="{ checkStrictly: true }"
                     :show-all-levels="false">
        </el-cascader>
      </el-form-item>
      <el-form-item label="单位限制" prop="restrictions">
        <el-select v-model="formInline.restrictions" placeholder="请选择 单位限制">
          <el-option label="包含下级单位" value="1"></el-option>
          <el-option label="仅本单位" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择站点" prop="site">
        <el-select v-model="formInline.site" placeholder="请选择 选择站点">
          <el-option label="区域一" value="1"></el-option>
          <el-option label="区域二" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择楼层" prop="floor">
        <el-select v-model="formInline.floor" placeholder="请选择 选择楼层">
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型" prop="devicetype">
        <el-select v-model="formInline.devicetype" placeholder="请选择 设备类型">
          <el-option label="感烟探测器" value="1"></el-option>
          <el-option label="气感" value="2"></el-option>
          <el-option label="门磁" value="3"></el-option>
          <el-option label="井盖异动" value="4"></el-option>
          <el-option label="一键报警按钮" value="5"></el-option>
          <el-option label="漏水监测" value="6"></el-option>
          <el-option label="安全用电探测器" value="7"></el-option>
          <el-option label="液化石油" value="8"></el-option>
          <el-option label="室外消防栓" value="9"></el-option>
          <el-option label="声光警号" value="10"></el-option>
          <el-option label="摄像头" value="11"></el-option>
          <el-option label="温感报警器" value="12"></el-option>
          <el-option label="红外探测器" value="13"></el-option>
          <el-option label="智能断路器" value="14"></el-option>
          <el-option label="压力变送器" value="15"></el-option>
          <el-option label="液位变送器" value="16"></el-option>
          <el-option label="温湿度探测器" value="17"></el-option>
          <el-option label="人体探测器" value="18"></el-option>
          <el-option label="一氧化碳探测器" value="19"></el-option>
          <el-option label="主机网关" value="20"></el-option>
          <el-option label="防火门监测系统" value="21"></el-option>
          <el-option label="消防电源" value="22"></el-option>
          <el-option label="火灾报警部件" value="23"></el-option>
          <el-option label="电气火灾部件" value="24"></el-option>
          <el-option label="一氧化碳" value="25"></el-option>
          <el-option label="智能穿戴" value="26"></el-option>
          <el-option label="复合型气感探测器" value="27"></el-option>
          <el-option label="智能显示屏" value="28"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="formInline.name" placeholder="请输入 设备名称"></el-input>
      </el-form-item>
      <el-form-item label="设备号" prop="numeber">
        <el-input v-model="formInline.numeber" placeholder="请输入 设备号"></el-input>
      </el-form-item>
      <el-form-item label="在线状态" prop="presence">
        <el-select v-model="formInline.presence" placeholder="请选择 在线状态">
          <el-option label="离线" value="shanghai"></el-option>
          <el-option label="在线" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="安装地址" prop="address">
        <el-input v-model="formInline.address" placeholder="请输入 安装地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button type="primary" @click="resetForm('formInline')">清空</el-button>
      </el-form-item>
    </el-form>
    <!--新增-->
    <el-button type="primary" size="small" @click="addform"> + 新增</el-button>
    <el-dialog title="新增" :visible.sync="dialogFormVisibleadd">
      <el-divider></el-divider>
      <el-form inline="true" :model="add" ref="add" :rules="rulesadd" label-width="100px">
        <el-form-item label="所属单位:" prop="unit">
          <el-cascader v-model="add.unit" placeholder="请选择 所属单位"
                       :options="options" filterable clearable :props="{ checkStrictly: true }"
                       :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="add.name" clearable placeholder="请输入 设备名称"></el-input>
        </el-form-item>
        <el-form-item label="设备号" prop="number">
          <el-input v-model="add.name" clearable placeholder="请输入 设备号"></el-input>
        </el-form-item>
        <el-form-item label="安装地址" prop="address">
          <el-input v-model="add.name" clearable placeholder="请输入 安装地址"></el-input>
        </el-form-item>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="submitForm">保 存</el-button>
      </el-form>
    </el-dialog>
    <!--            表格-->
    <el-table
        ref="multipleTable"
        :data="options"
        style="width:84vw"
        :header-cell-style="{backgroundColor: '#3F51B5', color: '#fff', fontSize: '12px' }"
        :cell-style="{color: '#fff', fontSize: '11px' }"
        :row-class-name="tableRowClassName">
      <el-table-column
          fixed
          prop="tSelection"
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="tSerialnumber"
          label="序号"
          width="55"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tAffiliatedunit"
          label="所属单位"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tDevicetype"
          label="设备类型"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tName"
          label="设备名称"
          width="100"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tDevicenumber"
          label="设备号"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tPresence"
          label="在线状态"
          width="100"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tSignal"
          label="信号"
          width="60"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tTefencestate"
          label="布防状态"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tSitename"
          label="站点名称"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tFloor"
          label="楼层"
          width="55"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tInstallationaddress"
          label="安装地址"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tInstallationdiagram"
          label="安装图"
          width="70"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tDataDate"
          label="数据时间"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="tAddDate"
          label="添加日期"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="400" show-overflow-tooltip>
        <template v-slot:default="scope">
          <el-select v-model="gengduo" placeholder="更多" size="mini">
            <el-option label="更换设备号" value="1">
              <el-button type="text" @click="dialogVisible = true">更换设备号</el-button>
            </el-option>
          </el-select>
          <!--                        <el-button size="mini" @click="handleSelect(scope.$index, scope.row)">-->
          <router-link :to="'/Details'">
            <el-button size="mini" type="primary" icon="el-icon-view">详情</el-button>

          </router-link>
          <!--                        </el-button>-->
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </el-table>
  </el-form>


  <el-dialog title="提示" :visible.sync="dialogVisible">
    <el-form :model="dialogform">
      <el-form-item label="替换的设备号" prop="number" inline="true" label-width="100px">
        <el-input v-model="dialogform.number" clearable placeholder="替换的设备号"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogform = false">取 消</el-button>
      <el-button type="primary" @click="dialogform = false">确 定</el-button>
    </div>
  </el-dialog>
</template>


<script>
export default {
  // name: "home",
  data() {
    return {
      formInline: {
        unit: '',
        restrictions: '',
        site: '',
        floor: '',
        devicetype: '',
        name: '',
        numeber: '',
        presence: '',
        address: ''
      },
      options: [
        {
          value: '智慧消防远程监控平台', label: '智慧消防远程监控平台',
          children: [{
            value: '朔州市消防大队', label: '朔州市消防大队',
            children: [{
              value: '圣厚源大酒店', label: '圣厚源大酒店',
              children: [{value: '圣厚源办公室', label: '圣厚源办公室'}]
            },
              {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司'}]
          },
            {
              value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司',
              children: [{
                value: '朔州市经济开发区管理委员会', label: '朔州市经济开发区管理委员会',
                children: [{value: '开发区环境局', label: '开发区环境局'}, {
                  value: '开发区建设局',
                  label: '开发区建设局'
                }]
              },
                {
                  value: '朔州市邮政储蓄银行', label: '朔州市邮政储蓄银行',
                  children: [{value: '右玉县支行', label: '右玉县支行'}, {value: '山阴县支行', label: '山阴县支行'}]
                },
                {
                  value: '开发南路', label: '开发南路',
                  children: [{value: '朔城区第三中学', label: '朔城区第三中学'}]
                },
                {
                  value: '文远路街道', label: '文远路街道',
                  children: [{value: '朔州今乔智慧公寓', label: '朔州今乔智慧公寓'}, {
                    value: '幸福家纺',
                    label: '幸福家纺'
                  }]
                }]
            }]
        }
      ],
      dialogFormVisibleadd: false,
      add: {
        unit: '',
        name: '',
        number: '',
        address: '',
      },
      rulesadd: {
        unit: [{required: true, message: '所属单位', trigger: 'change'}],
        name: [{required: true, message: '设备名称', trigger: 'blur'}],
        number: [{required: true, message: '设备号', trigger: 'blur'}],
        address: [{required: true, message: '安装地址', trigger: 'blur'}]
      },
      tableData: [{
        tSelection: '',
        tSerialnumber: '',
        tAffiliatedunit: '',
        tDevicetype: '',
        tName: '',
        tDevicenumber: '',
        tPresence: '',
        tSignal: '',
        tTefencestate: '',
        tSitename: '',
        tFloor: '',
        tInstallationaddress: '',
        tInstallationdiagram: '',
      }],
      dialogVisible: false,
      replace: {
        number: ''
      },
      rulesrep: {
        number: [{required: true, message: '替换的设备号', trigger: 'blur'}]
      },
      dialogform: {}
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    onSubmit() {
      console.log('submit!');
      console.log(this.formInline);
      debugger;

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addform() {
      this.add = {
        name: '',
        phone: '',
        unit: '',
        WeChat: '',
        note: '',
        voice: ''
      }
      this.dialogFormVisibleadd = true
    },
    submitForm() {
      this.tableData.push(this.add) //向tableData中添加数据
      this.dialogFormVisibleadd = false
      console.log('submit!')
    },//新增
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    tableRowClassName({row, rowIndex}) {
      if ((rowIndex + 1) % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    }, //表格斑马纹
  },
}


</script>

<style>
.el-form-item__label {
  color: #fff;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}

.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
  background-color: #242E66;
}

.el-cascader .el-input .el-input__inner {
  text-overflow: ellipsis;
  background-color: #242E66;
}

.el-input--suffix .el-input__inner {
  padding-right: 30px;
  background-color: #242E66;
}

.el-cascader-menu__list {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  box-sizing: border-box;
  background-color: #242E66;
}

.el-cascader-node__label {
  color: #fff;
}

.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
  color: #fff;
}

.el-input__inner {
  color: #fff;
}

.el-select-dropdown__item {
  color: #fff;
  background-color: #242E66;
}

.el-select-dropdown__list {
  background-color: #242E66;
}

.el-input--suffix .el-input__inner {
  padding-right: 30px;
  background-color: #242E66;
}

.el-table .warning-row {
  background: #384176;
}

/*斑马纹*/
.el-table .success-row {
  background: #242E66;
}

/*斑马纹*/
元素 {
  flex: 1 1 auto;
  overflow: hidden auto;
}

.el-input__inner {
  color: #fff;
  background-color: #242E66;
}

</style>
